<!--
 * @FileDescription 双目相机应用界面
 * @Author 杨宇翔
 * @Date 20220530 16:30:59
 * @LastEditors 杨宇翔
 * @LastEditTime 20220530 16:30:59
-->
<template>
    <div class="usage-page">
        <tooltip v-for="[instanceId, information] of TooltipComponent.Default.Informations"
            :key="`${instanceId} - ${information.Version}`" :Tooltip="information">
        </tooltip>

        <!-- <UsageLaneDetection />
        <UsageSidebar>
            <UsageLane />
        </UsageSidebar> -->
        <!-- <UsageCameraModule v-show="UsageComponent.Default.Module.value == '相机功能'" />
        <UsageSidebar v-show="UsageComponent.Default.Module.value == '相机功能'">
            <UsageCamera />
        </UsageSidebar> -->

        <UsageLaneDetection v-show="UsageComponent.Default.Module.value == '车道线识别'" />
        <UsageSidebar v-show="UsageComponent.Default.Module.value == '车道线识别'">
            <UsageLane />
        </UsageSidebar>

        <UsageOptions />

        <ExamNav />
        <ExamHeader />

        <UsageCameraInformation v-show="UsageComponent.Default.CameraInformationVisibility.value" />
    </div>
</template>

<script setup lang="ts">
import TooltipComponent from '@runtime/UnityEngineBridge/TooltipComponent';
import { onMounted, onUnmounted } from 'vue';
import { UsageComponent } from './ExamComponent';
import ExamHeader from './ExamHeader.vue';
import ExamNav from './ExamNav.vue';
import Tooltip from './Tooltip.vue';
import UsageLane from './UsageLane.vue';
import UsageLaneDetection from './UsageLaneDetection.vue';
import UsageSidebar from './UsageSidebar.vue';
import UsageCamera from './UsageCamera.vue';
import UsageCameraInformation from './UsageCameraInformation.vue';
import UsageCameraModule from './UsageCameraModule.vue';
import UsageOptions from './UsageOptions.vue';

onMounted(() => UsageComponent.Default.Awake());
onUnmounted(() => UsageComponent.Default.Destroy());
</script>

<style scoped>
.usage-page {
    background-color: transparent;
}
</style>